<template>
<div>
  <darkInput v-model="lon" placeholder="输入经度" title="经度" />
  <darkInput v-model="lat" placeholder="输入纬度" title="纬度" style="margin-top: 15px" />
  <darkInput v-model="height" placeholder="输入高度" title="高度" style="margin-top: 15px" />
  <el-button  style="margin-right: 15px" @click="delEntity">清除坐标</el-button>
  <el-button type="primary" style="margin: 15px 0 15px 0" @click="addPoint">确定</el-button>
  <teleport to="body">
    <div ref="popup" class="popup">
      <roomDialog
        :isuseDraggable="false"
        size="small"
        title="经纬度查询"
        :isFixed="false"
        @close="
          () => {
            clearEntity()
          }
        "
      >
        <div style="line-height: 46px; font-size: 23px"
          ><span>经度:</span><span style="color: #15c5e3">{{ lon }}</span></div
        >
        <div style="line-height: 46px; font-size: 23px"
          ><span>纬度:</span><span style="color: #15c5e3">{{ lat }}</span></div
        >
        <div style="line-height: 46px; font-size: 23px"
          ><span>高度:</span><span style="color: #15c5e3">{{ height }}</span></div
        >
      </roomDialog>
    </div>
  </teleport>
  </div>
</template>

<script setup>
import { defineEmits,onUnmounted } from 'vue'
import { createPointAndToView, createPopup } from '../../../../../api/gis3d/maputils'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['close'])
const lon = ref('')
const lat = ref('')
const height = ref('0')

let billboardEntity = null
let edit = null
let del = null
let closePopup = null
let hidePopup = null
const popup = ref()

const addPoint = () => {
  var a = lon.value;
  var b = lat.value;
  if (isNaN(a) || isNaN(b) || a === '' || b === '' || a > 180 || a < -180 || b > 90 || b < -90 ) {
    ElMessage({
      message: '请输入合法的经纬度坐标',
      type: 'warning'
    })
    return
  }
  const coordinates = [Number(lon.value), Number(lat.value),Number(height.value)]
  if (billboardEntity) {
    edit({ position: coordinates, data: {}, type: 'dw-poi' })
    hidePopup()
    return
  }
  ;({ billboardEntity, edit, del } = createPointAndToView({
    position: coordinates,
    data: {},
    type: 'dw-poi',
    url:"/static/icon/poi.png",
    reference:true
  }))
  ;({ closePopup, hidePopup } = createPopup(popup.value, 65, null, 'dw-poi'))
}

const delEntity = () => {
  del()
  closePopup()
  billboardEntity = null
  edit = null
  del = null
  closePopup = null
  hidePopup = null
  lon.value = ''
  lat.value = ''
  height.value = 0
}

const clearEntity = () => {
  hidePopup && hidePopup()
  // del && del()
  // billboardEntity = null
  // del = null
  // edit = null
}


</script>


<style lang="scss" scoped>
.popup {
  display: none;
  position: fixed;
}
</style>